* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none ;
}
.todoapp {
  width: 50vw;
  border: 1px solid black;
  margin: 0 auto;
}
.todoapp .header {
  width: 100%;
  background: #bbb;
}
.todoapp .header h1 {
  width: 100%;
  font-size: 80px;
  opacity: 0.4;
  text-align: center;
}
.todoapp .header .inputBox {
  width: 100%;
  display: flex;
  align-items: center;
}
.todoapp .header .inputBox .checkAll {
  width: 30px;
  height: 30px;
}
.todoapp .header .inputBox .new-todo {
  width: 400px;
  height: 50px;
  outline: none;
  border: 0;
}
.todoapp .todo-list {
  width: 100%;
}
.todoapp .todo-list .todo {
  width: 100%;
}
.todoapp .todo-list .todo .view {
  width: 100%;
  display: flex;
  background: #bbb;
}
.todoapp .todo-list .todo .view input.toggle {
  width: 30px;
  height: 30px;
}
.todoapp .todo-list .todo .view label {
  width: 370px;
  height: 30px;
}
.todoapp .todo-list .todo .view .destroy {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
